<!DOCTYPE html>
<html style="height: 100%" xmlns:th="http://www.thymeleaf.org">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>

       <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
       <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
       <script th:src="@{/echarts/echarts.min.js}" charset="utf-8"></script>

       <script type="text/javascript">
           var dom = document.getElementById("container");
           var myChart = echarts.init(dom);
           var app = {};
           var option = null;
           var $;
           layui.use('layer', function(){
               $=layui.jquery;
               $.get("/dataanalysis/pieVo",function (data) {

                   option = {
                       backgroundColor: '#2c343c',

                       title: {
                           text: 'Customized Pie',
                           left: 'center',
                           top: 20,
                           textStyle: {
                               color: '#ccc'
                           }
                       },

                       tooltip: {
                           trigger: 'item'
                       },

                       visualMap: {
                           show: false,
                           min: 80,
                           max: 600,
                           inRange: {
                               colorLightness: [0, 1]
                           }
                       },
                       series: [
                           {
                               name: '访问来源',
                               type: 'pie',
                               radius: '55%',
                               center: ['50%', '50%'],
                               data: data.sort(function (a, b) { return a.value - b.value; }),
                               roseType: 'radius',
                               label: {
                                   color: 'rgba(255, 255, 255, 0.3)'
                               },
                               labelLine: {
                                   lineStyle: {
                                       color: 'rgba(255, 255, 255, 0.3)'
                                   },
                                   smooth: 0.2,
                                   length: 10,
                                   length2: 20
                               },
                               itemStyle: {
                                   color: '#c23531',
                                   shadowBlur: 200,
                                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                               },

                               animationType: 'scale',
                               animationEasing: 'elasticOut',
                               animationDelay: function (idx) {
                                   return Math.random() * 200;
                               }
                           }
                       ]
                   };
                   ;
                   if (option && typeof option === "object") {
                       myChart.setOption(option, true);
                   }

               });
           });




       </script>
   </body>
</html>